<template>
	<view class="wrap">
		<van-cell title="添加收货地址" is-link @click="addrlist" v-if="state" />
		<view class="addr" v-if="!state" @click="addrlist">
			<view class="left">
				<text class="name">{{addr.name}}</text>
				<text class="tel">{{addr.tel}}</text>
				<p class="city">{{addr.province}}{{addr.county}}{{addr.city}}</p>
				<p class="info">{{addr.addressDetail}}</p>
			</view>
			<view class="right">
				<van-icon name="arrow" />
			</view>
		</view>
		<view class="goodlist">
			<van-card v-for="v in goods" :num="v.productNum" :price="v.productPrice" :desc="v.productDetails"
				:title="v.productName" :thumb="v.productImg" style="width:95vw;background-color: #ffffff;" />
		</view>
		<view class="ps">
			<textarea name="" id="" cols="30" rows="10" placeholder="请给我们留言..." v-model="message"></textarea>
		</view>
		<van-submit-bar :price="order.pri*100" button-text="支付" button-color="#Fe9b23" @submit="onSubmit" />
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import $http from '../../request/index.js'
	import {
		showSuccessToast,
		showFailToast
	} from 'vant'
	const store = useStore()
	let state = ref(true)
	let message = ref('')

	function addrlist() { //跳转到地址列表页面
		console.log('1111')
		uni.navigateTo({
			url: '/pages/addrlist/addrlist'
		})
	}
	let order, goods, addressId
	let addr = ref('')
	onShow(() => {
		order = computed(() => store.state.order) //读取vuex里的order
		goods = computed(() => store.state.order.goods) //读取vuex里的order
		addressId = computed(() => store.state.addressId)
		let address = uni.getStorageSync('addrlist')
		// 如果里面有东西就直接用
		if (address) {
			console.log('55555')
			state.value = false
			if (addressId.value) { //如果vuex里面有地址id，就用这个id对应的地址
				addr.value = address.filter(i => i.id == addressId.value)[0]
			} else { //如果没有，就用默认的地址
				// addr.value = address.filter(i => i.isDefault ==true)[0]
				addr.value = address[0]
			}
			console.log(addr.value)
		} else {
			// 没有就请求数据
			console.log('66666')
			$http.get('/address/list').then(res => {
				if (res.data.length) { //如果地址列表有数据
					// 改变state的状态值
					state.value = false
					// 点击订单默认地址可以在地址列表里选择地址
					if (addressId) { //如果vuex里面有地址id，就用这个id对应的地址
						addr.value = address.filter(i => i.id == addressId.value)[0]
					} else { //如果没有，就用默认的地址
						// addr.value = address.filter(i => i.isDefault ==true)[0]
						addr.value = address[0]
					}
					uni.setStorageSync('addrlist', res.data)
				} else {
					// 改变state的状态值
					state.value = true
				}
			})
		}
	})

	function onSubmit() { //点击支付
		let data = {
			goods: goods.value, //商品信息数组
			pri: order.value.pri, //商品总价
			message: message.value //备注信息
		}
		console.log(data)
		$http.post('/shopping/order', data).then(res => {
			console.log(res)
			// 点击支付，返回支付成功消息
			showSuccessToast(res.msg)
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		})
	}
</script>

<style scoped>
	.wrap {
		width: 100vw;
		height: calc(100vh - 44px);
		overflow-y: scroll;
		padding-bottom: 50px;
		background-color: #f7f7f7;
	}

	.ps {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	textarea {
		width: 95vw;
		height: 200rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		font-size: 30rpx;
	}

	.goodlist {
		width: 100vw;
		padding: 20rpx;
		background-color: #F7f7f7;
	}

	.addr {
		width: 100vw;
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 34rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #Fe9b23;
		background-color: #ffffff;
	}

	.name {
		font-weight: bold;
		font-size: 40rpx;
	}

	.tel {
		margin-left: 40rpx;
	}

	.info {
		font-size: 28rpx;
	}
</style>